<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.date"
        type="date"
        placeholder="请选择日期"
        class="filter-item"
        :clearable="false"
      ></el-date-picker>
      <el-input
        v-model="listQuery.partNo"
        placeholder="请输入物料号"
        style="width: 200px;"
        class="filter-item"
      /> 
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      <el-button v-waves style="float:right;" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">
        导出
      </el-button>
    </div>
    <el-table
      :data="list"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%"
      :height="tableHeight"
      show-summary
    >
      <el-table-column align="center" label="车间" prop="workstation">CY11</el-table-column>
      <el-table-column min-width="100px" align="center" label="物料号" prop="partNo" />
      <el-table-column min-width="100px" align="center" label="物料描述" prop="applianceDesc" />
      <el-table-column min-width="100px" align="center" label="日累计" prop="dayCount" />
      <el-table-column min-width="100px" align="center" label="月累计" prop="monthCount" />
      <el-table-column min-width="100px" align="center" label="年累计" prop="yearCount" />>
    </el-table>
  </div>
</template>
<script>
import { fetchList } from "@/api/production/stamping-daily"
import waves from "@/directive/waves"
import underscore from "underscore"
import { parseTime } from "@/utils"
import { formatList } from '@/utils/dataTest'
export default {
  name: "StampingDaily",
  directives: { waves },
  data() {
    return {
      // 查询
      listQuery: {
        date: new Date(),
        partNo: undefined
      },
      // 模拟表头
      emptyList: [],
      // 表格
      list: null,
      listLoading: false,
      tableHeight: 400
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.$nextTick(() => {
      const clientWidth = document.documentElement.clientWidth
      if (clientWidth > 1600) this.tableHeight = 600
    })
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      const data = {
        dateTime: parseTime(this.listQuery.date, "{y}-{m}-{d}"),
        partNo: this.listQuery.partNo
      }
      fetchList(data).then(res => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.fetchData();
    },
    handleReset() {
      this.listQuery = {
        date: new Date(),
        partNo: undefined
      };
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const header = [ '车间', '物料号', '物料描述', '日累计', '月累计', '年累计' ]
        const keys = [ 'partNo', 'applianceDesc', 'dayCount', 'monthCount', 'yearCount' ]
        const data = formatList(this.list, keys).map(v => { 
          const a = underscore.values(v)
          a.unshift('CY11')
          return a
        })
        excel.export_json_to_excel({
          header,
          filename: '冲压生产日报' + new Date().valueOf(),
          data
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>
